<template>
  <div class="enterpriseDialog">
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      :before-close="handelClose"
      :close-on-click-modal="false"
      append-to-body
    >
      <div class="title">基本情况填写</div>
      <div class="enterpriseDialog_center">
        <el-col
          v-for="(item,index) in filterList"
          :key="index"
          :span="item.label!=='计算依据'?11:20"
          style="padding:5px;margin-left: 10px;margin-bottom:5px"
        >
          <div style="display:flex;">
            <div style="flex:1.6;line-height: 35px;text-align:right">{{ item.label }}<span v-if="item.isMust" style="color:red;font-size:18px;font-weight:bolder">*</span>:</div>
            <div :style="{flex:item.label!=='计算依据'?5:11,marginLeft:10+'px'}">
              <template v-if="item.formType==='0'">
                <selectTree
                  :params="item.params"
                  :label="item.label"
                  :type="item.type"
                  :common-index="index"
                  :show-label="item.showLabel"
                  :choose-year="year"
                  :item-url="item.url"
                  :placeholder="item.placeholder"
                  :common-values="item.value"
                  @changeData="changeData"
                  @clearDate="clearDate"
                  @clearTreeSelect="clearTreeSelect"
                />
              </template>
              <template v-if="item.formType==='1'">
                <el-input v-model="item.value" :disabled="item.disabled" :style="{width:item.width?item.width:'100%'}" :rows="item.row" :type="item.inputType" :placeholder="item.placeholder" />
              </template>
              <template v-if="item.formType==='2'">
                <el-select v-model="item.value" style="width:100%" filterable clearable :placeholder="item.placeholder" @focus="getSelectFouce(item.url,item.placeholder,index,item.type)">
                  <el-option
                    v-for="(item1,index1) in item.selectOption"
                    :key="index1"
                    :label="item1[item.showLabel]"
                    :value="item1[item.showValue]"
                  />
                </el-select>
              </template>
              <template v-if="item.formType==='3'">
                <el-date-picker
                  v-model="item.value"
                  :type="item.pickerType"
                  style="width:100%"
                  :value-format="item.pickerFormat"
                  :placeholder="item.placeholder"
                />
              </template>
            </div>
          </div>
        </el-col>
        <col>
      </div>
      <div class="table">
        <vxe-table
          :align="allAlign"
          :data="tableData"
          border
        >
          <vxe-table-colgroup title="控制额">
            <vxe-table-column field="allYear" title="全年平衡(元)" />
            <vxe-table-column field="beginYearBudget" title="年初预算(元)">
              <!--  @focus="focusInput(scope.row)"
                      @input="handleClick(scope.row)" -->
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.beginYearBudget"
                  clearable
                  @input="handleClick(scope.row,'beginYearBudget')"
                />
              </template>
            </vxe-table-column>
            <vxe-table-column field="beginYearDeterminedAmount" title="年初确定控制额(元)">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.beginYearDeterminedAmount"
                  clearable
                  @input="handleClick(scope.row,'beginYearDeterminedAmount')"
                />
              </template>
            </vxe-table-column>
            <vxe-table-column field="midYearAddAmount" title="年中增加控制额(元)">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.midYearAddAmount"
                  clearable
                  @input="handleClick(scope.row,'midYearAddAmount')"
                />
              </template>
            </vxe-table-column>
          </vxe-table-colgroup>
        </vxe-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handelClose">取 消</el-button>
        <el-button v-if="title===&quot;新增&quot;" :loading="isSubmit" type="primary" @click="submitForm">新 增</el-button>
        <el-button v-if="title===&quot;修改&quot;" :loading="isSubmit1" type="primary" @click="submitForm">修 改</el-button>
      </span>

    </el-dialog>
  </div>
</template>
<script>
import { getCommonDataSource } from '@/api/reportCenter';
import { cmmonMenthodIncome } from '@/api/IncomeStatement/index.js';
import { Message } from 'element-ui';
import selectTree from '@/components/SelectTree/index.vue';

export default {
  components: {
    selectTree
  },
  data() {
    return {
      guid: '',
      allAlign: 'center',
      isDisable: false,
      title: '项目基本信息',
      dialogVisible: false,
      width: '65%',
      programGuid: '',
      isSubmit: false,
      isSubmit1: false,
      tableData: [{
        allYear: '',
        beginYearBudget: '',
        beginYearDeterminedAmount: '',
        midYearAddAmount: ''
      }],
      year: localStorage.getItem('chooseYear'),
      // 存放选择的条件
      filterList: [
        // 0 是下拉树 1 是input 2 是下拉框 3是年度选择器
        {
          label: '录入年度',
          placeholder: '请输入录入年度',
          formType: '3',
          value: '',
          symbol: 'eq',
          pickerType: 'year',
          pickerFormat: 'yyyy',
          isMust: true
        },
        {
          label: '录入日期',
          placeholder: '请输入录入日期',
          formType: '3',
          value: '',
          symbol: 'eq',
          pickerType: 'date',
          pickerFormat: 'yyyy-MM-dd',
          isMust: true
        },
        {
          label: '发文日期',
          placeholder: '请输入发文日期',
          formType: '3',
          value: '',
          symbol: 'eq',
          pickerType: 'date',
          pickerFormat: 'yyyy-MM-dd'
        },
        {
          label: '文号',
          placeholder: '请输入文号',
          formType: '1',
          value: '',
          symbol: 'eq'
        },
        {
          label: '单位',
          placeholder: '请选择单位',
          formType: '1',
          value: '',
          symbol: 'eq',
          disabled: true
        },
        {
          label: '项目',
          placeholder: '请输入项目',
          formType: '1',
          value: '',
          symbol: 'eq',
          isMust: true
        },
        {
          label: '支付科目',
          url: '/income/getPayCode',
          placeholder: '请选择支付科目',
          formType: '0',
          value: '',
          symbol: 'eq',
          showLabel: 'text',
          type: '0005',
          params: {
            code: '2',
            year: localStorage.getItem('chooseYear')
          }
        },
        {
          label: '转移支付科目',
          url: '/income/getPayTransCode',
          placeholder: '请选择转移支付科目',
          formType: '0',
          value: '',
          symbol: 'eq',
          showLabel: 'text',
          type: '0006',
          params: {
            code: '110',
            year: localStorage.getItem('chooseYear')
          }
        },
        {
          label: '大类',
          url: 'option/findByType',
          placeholder: '请选择大类',
          formType: '2',
          value: '',
          code: '',
          symbol: 'eq',
          showLabel: 'name',
          showValue: 'name',
          isMust: true,
          type: '0003',
          selectOption: []
        },
        {
          label: '类型',
          url: 'option/findByType',
          placeholder: '请选择类型',
          formType: '2',
          value: '',
          symbol: 'eq',
          showLabel: 'name',
          showValue: 'name',
          isMust: true,
          type: '0004',
          selectOption: []
        },
        {
          label: '资金来源',
          url: 'option/findByType',
          placeholder: '请选择资金来源',
          formType: '2',
          value: '',
          symbol: 'eq',
          showLabel: 'name',
          showValue: 'name',
          isMust: true,
          type: '0007',
          selectOption: []
        },
        // {
        //   label: '金额',
        //   placeholder: '请输入金额',
        //   formType: '1',
        //   value: '',
        //   symbol: 'eq',
        //   inputType: 'number',
        //   isMust: true
        // },
        {
          label: '计算依据',
          placeholder: '请输入计算依据',
          formType: '1',
          value: '',
          symbol: 'eq',
          row: '5',
          isMust: true,
          inputType: 'textarea',
          width: '113%'
        }
      ]

    };
  },
  watch: {
    '$store.state.adminOption.optionList': {
      deep: true,
      immediate: true,
      handler: function(arr) {
        if (arr.length) {
          // 大类
          const objDL = this.$store.state.adminOption.optionList.find(i => i.code === '0003');
          // 类型
          const objLX = this.$store.state.adminOption.optionList.find(i => i.code === '0004');
          // 资金来源
          const objZJLY = this.$store.state.adminOption.optionList.find(i => i.code === '0007');
          this.filterList.map(item => {
            if (item.type === '0003') {
              item.selectOption = objDL && objDL.children || [];
            } else if (item.type === '0004') {
              item.selectOption = objLX && objLX.children || [];
            } else if (item.type === '0007') {
              item.selectOption = objZJLY && objZJLY.children || [];
            }
          });
        }
      }
    }
  },
  created() {
    // 获取系统内置
    this.$store.dispatch('adminOption/getListOptions');
  },
  methods: {
    handleClick(row, type) {
      // row[type] = ('' + row[type]) // 第一步：转成字符串
      //   .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
      //   .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
      //   .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
      //   .match(/^\d*(\.?\d{0,2})/g)[0] || ''; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
      this.tableData[0].allYear = (Number(this.tableData[0].beginYearBudget) + Number(this.tableData[0].beginYearDeterminedAmount) +
       Number(this.tableData[0].midYearAddAmount)).toFixed(2);
    },
    handelClose() {
      this.dialogVisible = false;
      this.filterList.map(o => {
        o.value = '';
      });
      this.tableData = [{
        allYear: '',
        beginYearBudget: '',
        beginYearDeterminedAmount: '',
        midYearAddAmount: ''
      }];
    },
    clearDate() {
      this.filterList[9].value = '';
    },
    clearTreeSelect(row) {
      this.filterList[row.commonIndex].value = '';
    },
    getSelectFouce(url, placeholder, index, type) {
      if (this.filterList[index].selectOption.length) return;
      getCommonDataSource({
        type: type
      }, url).then(res => {
        if (res.success) {
          if (placeholder.indexOf('类型') !== -1 && this.filterList[8].value !== '') {
            const value = this.filterList[8].code;
            this.filterList[index].selectOption = res.data.filter(item => item.code.indexOf(value) !== -1);
          } else {
            this.filterList[index].selectOption = res.data;
          }
        } else {
          this.filterList[index].selectOption = [];
        }
      });
    },
    changeData(row) {
      this.filterList[row.commonIndex].value = row.data[row.showLabel].split(' ')[1];
      this.filterList[row.commonIndex].code = row.data[row.showLabel].split(' ')[0];
    },
    submitForm() {
      let url = '';
      let message = '';
      if (this.title === '新增') {
        url = '/income/add';
        message = '新增成功';
      } else {
        url = '/income/update';
        message = '修改成功';
      }

      if (this.filterList[0].value === '') {
        Message({
          message: '录入年度不能为空',
          type: 'warning'
        });
      } else if (this.filterList[1].value === '') {
        Message({
          message: '录入日期不能为空',
          type: 'warning'
        });
      } else if (this.filterList[5].value === '') {
        Message({
          message: '项目不能为空',
          type: 'warning'
        });
      } else if (this.filterList[8].value === '') {
        Message({
          message: '大类不能为空',
          type: 'warning'
        });
      } else if (this.filterList[9].value === '') {
        Message({
          message: '类型不能为空',
          type: 'warning'
        });
      } else if (this.filterList[10].value === '') {
        Message({
          message: '资金来源不能为空',
          type: 'warning'
        });
      } else if (this.filterList[11].value === '') {
        Message({
          message: '计算依据不能为空',
          type: 'warning'
        });
      } else {
        cmmonMenthodIncome(url, {
          'year': this.filterList[0].value,
          'inputDate': this.filterList[1].value,
          'dispatchDate': this.filterList[2].value,
          'fileNo': this.filterList[3].value,
          'enterprise': this.filterList[4].value,
          'item': this.filterList[6].value,
          'subject': this.filterList[5].value,
          'transPaySubject': this.filterList[7].value,
          'priorType': this.filterList[8].value,
          'type': this.filterList[9].value,
          'resources': this.filterList[10].value,
          // 'money': this.filterList[11].value,
          'calcBasis': this.filterList[11].value,
          'createUser': localStorage.getItem('xcUserId'),
          'beginYearBudget': Number(this.tableData[0].beginYearBudget),
          'beginYearDeterminedAmount': Number(this.tableData[0].beginYearDeterminedAmount),
          'midYearAddAmount': Number(this.tableData[0].midYearAddAmount),
          'guid': this.guid,
          'enterpriseGuid': this.$parent.$refs.enterpriseTree.enterpriseGuid
        }).then(res => {
          if (res.success) {
            Message({
              message: message,
              type: 'success'
            });
            this.handelClose();
            this.$parent.getData();
          } else {
            Message({
              message: res.message,
              type: 'warning'
            });
          }
        });
      }
    }

  }
};
</script>
<style lang='scss' scoped>
.enterpriseDialog_center{
  height: calc(53vh);
  overflow-y: auto
}
.enterpriseDialog /deep/ .el-dialog__body {
    padding: 15px 0px !important;
    color: #606266;
    font-size: 15px;
}
.title{
    height: 30px;
    margin-left: 20px;
    border-bottom: 1px solid #ccc6c6;
    width: 90%;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}
.table{
  margin-bottom: 15px;
  padding:10px 30px
}

</style>
